import React, { useState, Fragment } from 'react';
import { Button, Modal, Form, Input } from 'antd';
import { getMessage, TextWidget } from '@inbiz/react';
import { FormInstance } from 'antd/es/form';
// import { useForm, useField } from '@formily/react';
// import EditableTable, { IColumns } from '@inbiz/components/common/EditableTable';
// import { useQueryFields } from '@inbiz/hooks';
// import { toJS } from '@formily/reactive';
// import ShowField, { IShowFieldRef } from './ShowField';
type IProps = {
  value?: string;
  onOk?: (any) => void;
};

const Add = (props: IProps) => {
  const formRef = React.createRef<FormInstance>();
  const [isModalVisible, setIsModalVisible] = useState(false);

  //takeMessage('settings.x-component-props', true)
  //takeMessage()
  //takeMessage('title')

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    formRef.current!.submit();
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.onOk({
      data: values,
      cb: () => {
        setIsModalVisible(false);
      },
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Fragment>
      <Button type="primary" size="small" onClick={showModal}>
        <TextWidget>Tag.btn.add</TextWidget>
      </Button>
      <Modal
        width="400px"
        title={getMessage('Tag.addNewTag')}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={getMessage('Tag.btn.ok')}
        cancelText={getMessage('Tag.btn.cancel')}
        destroyOnClose
      >
        <Form
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          ref={formRef}
        >
          <Form.Item
            label={getMessage('Tag.tagName')}
            name="modelName"
            rules={[{ required: true, message: getMessage('Tag.pleaseEntertagName') }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Fragment>
  );
};

export default Add;
